<template>
  <div id="echarts_box" style="height: 100%; width: 100%;" />
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'Columnar',
  components: { },
  data() {
    return {
      option: {
        title: {
          text: '昨日累计工时TOP5城市',
          subtext: '单位（人）'
        },
        grid: {
          top: '80px',
          left: '40px',
          right: '20px',
          bottom: '50px'
        },
        tooltip: {},
        // legend: {
        //   data: ['销量']
        // },
        xAxis: {
          data: ['成都', '武汉', '长沙', '沈阳', '西安']
        },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar',
          data: [5, 20, 44, 10, 30],
          barWidth: 30,
          // barGap: '80%', /* 多个并排柱子设置柱子之间的间距*/
          // barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
          showBackground: true,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ]
            )
          },
          emphasis: {// 划过
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          }
        }]
      }
    }
  },
  created() {
  },
  mounted() {
    // 1. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_box'))
    // 2. 发起请求，获取数据
    // const { data: res } = await this.$http.get('reports/type/1')
    // if (res.meta.status !== 200) {
    //    return this.$message.error('获取折线图数据失败！')
    // }
    // 3. 使用刚指定的配置项和数据，显示图表
    myChart.setOption(this.option)
  },
  methods: {

  }
}
</script>
